<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1. 准备一个容器 -->
    <div id="app">
      <p>{{msg}}</p>
    </div>
    <!-- 2. 引框架 -->
    <script src="./vue.js"></script>
    <script>
      // nba aj js css
      // MVVM是Model-View-ViewModel的简写
      // m -> model 模型 代表的就是数据
      // v -> view 视图 就是html
      // vm -> viewmodel 视图模型 它是一个桥梁
      // 我们以前写的代码都是写在一起，不分的，但是我们现在用vue写代码分了三块，把代码分开写了
      //  我们以前写的代码蛋炒饭 东西分部混在一起 我们现在vue的代码 盖码饭
      //   vm是Vue实例对象 为什么要叫vm 因为vue是有mvvm的思想
      //   new Vue({选项对象})

      //   mvvm的好处
      //   1. 提升开发效率
      //   2. 方便代码后期维护

      // mvvm的特点：
      //   1. 在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，ViewModel能够观察到数据的变化，并对视图对应的内容进行更新，这个特性被称为数据响应式或者叫数据驱动。
      // 2. 不用操作DOM vue不推荐操作DOM，以后document.querySelector基本上不用写了
      const vm = new Vue({
        el: "#app", //el就是element元素的意思 它是用来和我们上面准备好的容器产生关系
        data: {
          //数据
          msg: "hello world",
        },
      });
    </script>
  </body>
</html>
